<template>
  <div>
    <div class="head-bg" style="height: 520px">
      <el-image :src="headBg" fit="cover"></el-image>
    </div>
    <div class="w-1200-container py-16">
      <div class="spin-title">
        入驻有哪些好处
      </div>
      <div class="join-container">
        <div
          v-for="(item, index) in joinList"
          :key="item.title"
          class="join-box-container"
        >
          <div
            :class="[
              'float-line z-20',
              joinBoxColor(index).bg,
              'hover:border-0',
            ]"
          ></div>
          <div
            :class="[
              'join-box',
              'border-gray-300',
              'bg-white',
              `hover:border-${joinBoxColor(index).color}`,
            ]"
          >
            <div :class="['animation-bg', `${joinBoxColor(index).bg}`]"></div>

            <div :class="['join-content']">
              <div
                :class="[`text-${joinBoxColor(index).color}`, 'badge-title']"
              >
                {{ '0' + (index + 1) }}
              </div>
              <div class="icon-box z-20">
                <i class="el-icon-present"></i>
              </div>
              <div class="join-main">
                <h6 class="py-4">
                  {{ item.title }}
                </h6>
                <p class="inline-block text-left  overflow-hidden">
                  {{ item.content }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="spin-box">
      <div class="spin-title">
        入驻有哪些好处
      </div>

      <div class="spin-container">
        <div class="inner-spin">
          <div class="content">
            入驻六大好处
          </div>

          <div class="img-container">
          <el-image
            src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/562b325120efba096b3f9f593de058dd_88_88.png"
            fit="cover"
          >
          </el-image>
        </div>
        </div>

        <div class="big-spin">
          <div class="box4">
            <div class="ball ball-1">
              <div class="inner">
                <i class="el-icon-upload"></i>
              </div>
            </div>

            <div class="ball ball-2">
              <div class="inner">
                <i class="el-icon-postcard"></i>
              </div>
            </div>

            <div class="ball ball-3">
              <div class="inner">
                <i class="el-icon-cpu"></i>
              </div>
            </div>

            <div class="ball ball-4">
              <div class="inner">
                <i class="el-icon-connection"></i>
              </div>
            </div>

            <div class="ball ball-5">
              <div class="inner">
                <i class="el-icon-odometer"></i>
              </div>
            </div>

            <div class="ball ball-6">
              <div class="inner">
                <i class="el-icon-map-location"></i>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div> -->

    <div class="form-container">
      <div class="form-box">
        <div class="form-head">
          入驻专家库信息表
        </div>
        <div class="form-sub-head">
          <a href="#baseInfo">
            <div class="item">
              <div class="icon-container">
                <!-- <el-image
                src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/562b325120efba096b3f9f593de058dd_88_88.png"
              ></el-image> -->
                <i class="el-icon-sunset" type="primary"></i>
              </div>
              <div class="bottom-text">
                基本信息
              </div>
            </div>
          </a>

          <a href="#education">
            <div class="item">
              <div class="icon-container">
                <!-- <el-image
                src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/562b325120efba096b3f9f593de058dd_88_88.png"
              ></el-image> -->
                <i class="el-icon-medal" type="primary"></i>
              </div>
              <div class="bottom-text">
                学历学位
              </div>
            </div>
          </a>

          <a href="#unitName">
            <div class="item">
              <div class="icon-container">
                <!-- <el-image
                src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/562b325120efba096b3f9f593de058dd_88_88.png"
              ></el-image> -->

                <i class="el-icon-office-building" type="primary"></i>
              </div>

              <div class="bottom-text">
                工作单位
              </div>
            </div>
          </a>

          <a href="#diploma">
            <div class="item">
              <div class="icon-container">
                <!-- <el-image
                src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/562b325120efba096b3f9f593de058dd_88_88.png"
              ></el-image> -->

                <i class="el-icon-tickets" type="primary"></i>
              </div>
              <div class="bottom-text">
                个人简历
              </div>
            </div>
          </a>
        </div>

        <div class="form-content">
          <div class="head">
            填写入驻专家库信息表
          </div>
          <div class="content">
            <el-form
              v-loading="formLoading"
              ref="form"
              :model="form"
              :rules="formRule"
              label-width="200px"
              style="padding: 20px 0"
            >
              <div class="title" id="baseInfo">
                基本信息
              </div>
              <el-form-item label="姓名:" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入您的姓名"
                  style="width: 100%"
                >
                </el-input>
              </el-form-item>

              <el-form-item label="性别:" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio label="1"> 男 </el-radio>
                  <el-radio label="0"> 女 </el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="籍贯:" prop="nativePlace">
                <el-input
                  v-model="form.nativePlace"
                  placeholder="请输入您的籍贯"
                  style="width: 100%"
                >
                </el-input>
                <!-- <el-select
                  v-model="form.nativePlace"
                  placeholder="请选择您的所在地"
                  style="width: 100%"
                >
                  <el-option label="江西南昌" value="1"></el-option>
                  <el-option label="河北秦皇岛" value="0"></el-option>
                </el-select> -->
              </el-form-item>

              <el-form-item label="出生日期:" prop="birthTime">
                <el-date-picker
                  type="date"
                  placeholder="选择您的出生年月"
                  v-model="form.birthTime"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="联系电话:" prop="phone">
                <el-input
                  type="number"
                  v-model="form.phone"
                  placeholder="请填写您的电话号码"
                  style="width: 100%"
                >
                </el-input>
              </el-form-item>
              <!-- ----------------------------------------------------------------------------- -->
              <div class="title" id="education">
                学历学位
              </div>

              <el-form-item label="最高学历:" prop="diploma">
                <el-select
                  v-model="form.diploma"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in educationList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="毕业院校:" prop="graduateSchool">
                <el-input v-model="form.graduateSchool" style="width: 100%">
                </el-input>
              </el-form-item>

              <el-form-item label="研究领域:" prop="domainId">
                <el-select
                  v-model="form.domainId"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in positionList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="职称:" prop="professionalTitle">
                <el-input v-model="form.professionalTitle" style="width: 100%">
                </el-input>
              </el-form-item>

              <el-form-item
                label="是否为政府评审专家成员："
                prop="reviewExpertMembers"
              >
                <el-radio-group v-model="form.reviewExpertMembers">
                  <el-radio label="1"> 是 </el-radio>
                  <el-radio label="0"> 否 </el-radio>
                </el-radio-group>
              </el-form-item>

              <!-- ----------------------------------------------------------------------------- -->
              <div class="title" id="unitName">
                工作单位
              </div>

              <el-form-item label="工作单位(全称):" prop="unitName">
                <el-input v-model="form.unitName" style="width: 100%">
                </el-input>
              </el-form-item>

              <el-form-item label="职务:" prop="office">
                <el-input v-model="form.office" style="width: 100%"> </el-input>
              </el-form-item>

              <el-form-item label="所属单位类型:" prop="unitType">
                <!-- <el-input v-model="form.unitType" style="width: 100%">
                </el-input> -->

                <el-select
                  v-model="form.unitType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in companyList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="所在地:" prop="address">
                <el-input v-model="form.address" style="width: 100%">
                </el-input>
              </el-form-item>

              <!-- ----------------------------------------------------------------------------- -->

              <div class="title" id="diploma">
                个人简历
              </div>
              <el-form-item
                label="包括个人履历、社会职务、 研究成果等："
                prop="resumeContent"
              >
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  v-model="form.resumeContent"
                ></el-input>
              </el-form-item>

              <el-form-item label="请上传您的证明材料：">
                <el-upload
                  class="upload-demo"
                  :action="relatedAccessoryAction"
                  :headers="relatedAccessoryHeaders"
                  :before-upload="beforeUploadFile"
                  :on-progress="handleProgressFile"
                  :on-change="handleChangeFile"
                  :on-error="handleErrorFile"
                  :on-remove="handleRemoveFile"
                  :on-success="handleSuccessFile"
                  name="file"
                  :file-list="fileList"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
              </el-form-item>

              <el-form-item class="submit-btn">
                <el-button type="primary" @click="submitForm('form')"
                  >立即创建</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <div class="service-module" style="background-color: #fefefe">
      <div class="container">
        <div class="title">
          服务动态
        </div>
        <div class="content">
          <div v-for="item in serviceInfo" :key="item.id" class="img-item">
            <el-image :src="item.mainImg" fit="cover"> </el-image>
            <div class="hover-title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="service-module" style="background-color:  #f6faff; ">
      <div class="container ">
        <div class="title">
          服务动态
        </div>
        <div class="content">
          <div class="big-img">
            <el-image :src="serviceInfo[0].mainImg" fit="cover"></el-image>
          </div>
          <div class="right-list">
            <div class="item">
              <el-image :src="serviceInfo[0].mainImg" fit="fill"></el-image>
              <div class="info">
                <p class="title">
                  这题这是标题这是标题...
                </p>
                <p class="sub">{{ serviceInfo[0].releaseTime }}</p>
              </div>
            </div>

            <div class="item">
              <el-image :src="serviceInfo[0].mainImg" fit="fill"></el-image>
              <div class="info">
                <p class="title">
                  这是标题这是标题这是标题这是标题这11111111111111是标22222222222222题这是标题这是标题这是标题这是标题...
                </p>
                <p class="sub">{{ serviceInfo[0].releaseTime }}</p>
              </div>
            </div>

            <div class="item">
              <el-image :src="serviceInfo[0].mainImg" fit="fill"></el-image>
              <div class="info">
                <p class="title">
                  这是标题这是标题这是标题这是标题这11111111111111是标22222222222222题这是标题这是标题这是标题这是标题...
                </p>
                <p class="sub">{{ serviceInfo[0].releaseTime }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { addExpert } from '@/api/expert'

export default {
  name: 'techExpert',
  data() {
    return {
      headBg: require('@/assets/page-head/expert-join.png'),
      formLoading: false,
      form: {
        name: '',
        sex: '1',
        nativePlace: '',
        birthTime: '',
        phone: '',
        diploma: '',
        graduateSchool: '',
        domainId: '',
        professionalTitle: '',
        reviewExpertMembers: '1',
        unitName: '',
        office: '',
        unitType: '',
        address: '',
        resumeContent: '',
        fileArr: [],
      },
      formRule: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        nativePlace: [
          { required: true, message: '请输入籍贯', trigger: 'blur' },
        ],

        birthTime: [
          { required: true, message: '请选择出生年月', trigger: 'blur' },
        ],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        diploma: [{ required: true, message: '请选择学历', trigger: 'blur' }],
        graduateSchool: [
          { required: true, message: '请输入毕业院校', trigger: 'blur' },
        ],
        domainId: [
          { required: true, message: '请选择关注领域', trigger: 'blur' },
        ],
        professionalTitle: [
          { required: true, message: '请输入职称', trigger: 'blur' },
        ],
        reviewExpertMembers: [
          {
            required: true,
            message: '对于是否为政府评审专家成员请选择',
            trigger: 'blur',
          },
        ],
        unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        office: [{ required: true, message: '请输入职务', trigger: 'blur' }],
        unitType: [
          { required: true, message: '请输入所属单位类型', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入工作单位所在地', trigger: 'blur' },
        ],
        resumeContent: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
        ],
        fileArr: [
          { required: true, message: '请上传证明材料', trigger: 'blur' },
        ],
      },

      loading: '',
      limitUploadFileNum: 50,
      // 上传文件时 需要的参数
      relatedAccessoryAction: process.env.VUE_APP_BASE_API + '/common/upload',
      relatedAccessoryHeaders: {
        Authorization: 'Bearer ' + getToken(),
      },

      // 附件上传 数组
      fileList: [],
      serviceInfo: [
        // title:标题
        // mainImg:主图
        // typeId:23
        // releaseTime:发布时间
        // releaseName:发布人
        // brownNum:浏览量
        // collectionNum:收藏量
        // sort:排序
        // dynamicInfo:动态详情
        {
          id: 0,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: 'title1',
          releaseTime: '2021-09-24',
        },
        {
          id: 1,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: 'title22',
          releaseTime: '2021-09-25',
        },
        {
          id: 2,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: 'title333',
          releaseTime: '2021-09-26',
        },
        {
          id: 3,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: 'title4444',
          releaseTime: '2021-09-22',
        },
        {
          id: 4,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: 'title55555',
          releaseTime: '2021-09-27',
        },
      ],

      // 入驻好处 列表
      joinList: [
        {
          icon: '',
          title: '获取报酬',
          content:
            '依法依规获取相关文件、资料和数据，独立发表工作意见，并获取劳动报酬。',
        },
        {
          icon: '',
          title: '产学研合作',
          content:
            '产学研合作需求并在线接单，将知识经验能力变现，助力企业创新。',
        },
        {
          icon: '',
          title: '科创交流活动',
          content:
            '通过成果路演、企业走访等活动，实现信息的高效流转，提升信息资源的传播力和价值。',
        },
        {
          icon: '',
          title: '成果对接',
          content:
            '为科技成果提供宣传推广平台，筛选匹配有相应需求的企业进行横向转让合作，可以是成果转让、技术入股或授权许可等多种形式合作。',
        },
        {
          icon: '',
          title: '科技成果拍卖',
          content:
            '科技成果拍卖将面向省内外高校院所和企事业单位征集符合江西产业发展需求的科技成果，通过促成受让意向、组织竞拍活动、促成技术交易、提供产业化服务。',
        },
        {
          icon: '',
          title: '创新成果转化',
          content:
            '主要包括能力价值转化和科技成果转化。通过技转云资源和技术转移全流程系统，帮助人才的资历、经验及品牌显性化，同时基于人才的研发领域，匹配相应领域需求的企业进行产学研合作，助力能力价值与科技成果转化。',
        },
      ],
      // 学历列表   expert_highest_education
      educationList: [],
      // 单位类型   expert_unit_type
      companyList: [],
      // 研究领域   user_common_field
      positionList: [],
    }
  },
  computed: {
    joinBoxColor() {
      let colorList = [
        { color: 'red-500', bg: 'bg-red-500' },
        { color: 'yellow-500', bg: 'bg-yellow-500' },
        { color: 'yellow-300', bg: 'bg-yellow-300' },
        { color: 'green-500', bg: 'bg-green-500' },
        { color: 'blue-500', bg: 'bg-blue-500' },
        { color: 'purple-500', bg: 'bg-purple-500' },
      ]
      return (index) => {
        if (index && !isNaN(Number(index))) {
          return colorList[index]
        }
        return colorList[0]
      }
    },
  },
  created() {
    this.getDictListFun()
  },
  methods: {
    // 获取字典列表
    getDictListFun() {
      let educationName = 'expert_highest_education'
      let companyName = 'expert_unit_type'
      let positionName = 'user_common_field'
      this.getDictList(educationName).then((res) => {
        if (res.code == 200) {
          this.educationList = res.data
        }
      })

      this.getDictList(companyName).then((res) => {
        if (res.code == 200) {
          this.companyList = res.data
        }
      })

      this.getDictList(positionName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
    },

    // -------------- 附件上传 -------------
    /** 上传附件 */
    beforeUploadFile(file) {
      let fileMax = parseInt(file.size / 1024 / 1024)
      let isLt5M = fileMax >= this.limitUploadFileNum
      if (isLt5M) {
        this.$alert('上传文件超出限制，该文件大小: ' + fileMax + 'M', {
          confirmButtonText: '确定',
          type: 'warning',
          center: true,
        })
        return false
      }
    },
    handleProgressFile() {
      this.loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
    },
    // 附件上传
    handleChangeFile(file, fileList) {
      if (!file.response || file.response.code !== 200) {
        return
      } else {
        this.fileList = fileList
      }
    },
    handleSuccessFile(response, file) {
      let obj = { fileName: file.name, pathName: response.data }
      if (this.loading) {
        this.loading.close()
      }
    },
    handleErrorFile() {
      if (this.loading) {
        this.loading.close()
      }
      this.$alert('上传文件异常', {
        confirmButtonText: '确定',
        type: 'warning',
        center: true,
      })
    },
    handleRemoveFile(file, fileList) {
      this.fileList = fileList
    },

    // 将组件中的 fileList 整合出自己想要的数组
    getFileList(list) {
      let newFileList = list.map((item) => {
        let obj = {}
        if (item.response.name && item.response.url) {
          obj = {
            pathName: item.response.url,
            fileName: item.response.name,
          }
        }
        return obj
      })
      return newFileList
    },

    submitForm(formName) {
      this.form.domainId = parseInt(this.form.domainId)
      this.form.type = '1'

      this.$refs[formName].validate((valid) => {
        this.form.fileArr = JSON.stringify(this.getFileList(this.fileList))
        // return
        if (valid) {
          this.formLoading = true
          addExpert(this.form)
            .then((res) => {
              if (res == 200) {
                this.$message({
                  type: 'success',
                  message: '提交成功',
                })
                this.form = {
                  name: '',
                  sex: '1',
                  nativePlace: '',
                  birthTime: '',
                  phone: '',
                  diploma: '',
                  graduateSchool: '',
                  domainId: '',
                  professionalTitle: '',
                  reviewExpertMembers: '1',
                  unitName: '',
                  office: '',
                  unitType: '',
                  address: '',
                  resumeContent: '',
                  fileArr: [],
                }
                this.fileList = []
              }

              this.formLoading = false
            })
            .finally(() => {
              this.formLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@keyframes spin-1 {
  to {
    transform: rotate(1turn);
  }
}

@keyframes big-spin-breath {
  0%,
  100% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(0.9);
  }
}
.spin-box {
  padding-bottom: 80px;
  background-color: #f6faff;
}
.spin-container {
  position: relative;
  width: 620px;
  height: 620px;
  margin: auto;
  transform: scale(1.3);
}
.spin-title {
  width: 100%;
  font-size: 30px;
  margin-bottom: 40px;
  line-height: 3rem;
  text-align: center;
  font-weight: 700;
  color: #333333;
}
.inner-spin {
  position: absolute;
  // 55 + 255 - 190
  left: 115px;
  top: 115px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  padding: 60px;
  margin: auto;
  border-radius: 50%;
  border: solid 1px #1678ff;

  .content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: #409eff;
    font-size: 34px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #fff;
  }

  .img-container {
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}

.big-spin {
  position: relative;
  width: 620px;
  height: 620px;
  margin: auto;
  padding: 55px;
  cursor: pointer;
  border-radius: 50%;
  // animation: big-spin-breath 8s infinite linear;

  .box4 {
    width: 510px;
    height: 510px;
    // padding: 55px;
    margin: auto;
    border-radius: 50%;
    border: dashed 1px #1678ff;

    // background-color: #df5454;
    .ball {
      position: absolute;
      left: 278px;
      top: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      line-height: 64px;
      border-radius: 50%;
      font-size: 20px;
      font-weight: bold;
      background-color: #1678ff;
      color: #fff;
      animation: spin-1 60s infinite linear;
      .inner {
        position: relative;
        animation: inherit;
        animation-direction: reverse;

        display: flex;
        justify-content: center;
        align-items: center;

        & > i {
          font-size: 2.5rem;
        }
      }
    }

    .ball-1 {
      // y = 510/2 + 32
      transform-origin: 50% 287px;
    }

    .ball-2 {
      // x == 32 + 550/4
      // y == 64 + 127.5
      transform-origin: -159.5px 191.5px;
      // 127.5 + 55 - 64
      top: 118.5px;
      // 620/2 + 127.5px + 32px
      left: calc(437.5px + 32px);
    }

    .ball-3 {
      // x == 32 + 550/4
      transform-origin: -159.5px -127.5px;
      // 620-118.5-64
      top: calc(447.5px);
      // 620/2 + 127.5px + 32px
      left: calc(437.5px + 32px);
    }

    .ball-4 {
      // 87== 55 + 64 - 32
      // y == -(510/2) + 32
      // animation: spin-1 8s infinite linear 2s;
      transform-origin: 50% -223px;
      top: calc(620px - 87px);
    }

    .ball-5 {
      transform-origin: 223px -127.5px;
      left: calc(87px);
      top: calc(447.5px);
    }

    .ball-6 {
      // x = 255 -32
      // y = 64 + 127.5
      transform-origin: 223px 191.5px;
      // 127.5 + 55 - 64
      top: 118.5px;
      // 55 + 32
      left: calc(87px);
    }
  }
}

.form-container {
  padding: 20px 0;
  background-color: #f3f7fb91;
  .form-box {
    width: 1200px;
    min-width: 1200px;
    margin: auto;

    .form-head {
      font-size: 30px;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      text-align: left;
      color: #333333;
    }

    .form-sub-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      .item {
        .icon-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          height: 60px;
          padding: 9px;
          margin: auto;
          border: 2px solid #1678ff;
          border-radius: 50%;
          text-align: center;

          i {
            color: #1678ff;
            font-size: 40px;
          }

          .el-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }

          &:hover {
            background-color: #1678ff;

            i {
              color: #ffffff;
            }
          }
        }
        .bottom-text {
          font-size: 20px;
          font-weight: bold;
          line-height: 3rem;
          color: rgb(131, 131, 131);
        }
      }
    }

    .form-content {
      padding: 20px;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 0px 0px 20px 0px #e7edf5;
      .head {
        font-size: 20px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #f08519;
      }

      .content {
        padding-top: 20px;
        .title {
          font-size: 18px;
          padding: 20px 0;
          margin-bottom: 20px;
          border-bottom: dashed 1px #efefef;
          color: #999999;
        }

        .form-item {
          .label {
            min-width: 10rem;
          }
        }
        .el-form {
          font-size: 20px;
          ::v-deep .el-form-item__label {
            text-align: left;
          }
          .submit-btn {
            ::v-deep .el-button {
              width: 615px;
              height: 50px;
              opacity: 1;
              background: #f08519;
              border-radius: 4px;
              border-color: #f08519;
            }
          }
        }
      }
    }
  }
}

.service-module {
  padding: 50px;

  .container {
    min-width: 1200px;
    width: 1200px;
    margin: auto;
    & > .title {
      font-size: 30px;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      text-align: left;
      color: #333333;
    }
    & > .content {
      width: 1200px;
      display: flex;
      flex-flow: row wrap;
      padding-top: 40px;
      .el-image {
        width: 100%;
        height: 100%;
        transition: 300ms ease-out all;
      }
      .img-item {
        position: relative;
        width: 388.3px;
        height: 254px;
        margin-top: 16px;
        margin-left: 16px;
        cursor: pointer;
        overflow: hidden;

        .hover-title {
          position: absolute;
          left: 0;
          bottom: -4rem;
          width: 100%;
          height: 4rem;
          line-height: 4rem;
          padding: 0 20px;
          font-size: 30px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          text-align: left;
          color: #ffffff;
          background: #1677ffab;

          transition: 300ms ease all;
        }

        &:hover {
          .hover-title {
            bottom: 0;
          }
        }
      }
      .img-item:nth-child(1) {
        width: 794px;
        height: 370px;
        margin: 0;
      }
      .img-item:nth-child(2) {
        width: 388px;
        height: 370px;
        margin-top: 0;
      }
      .img-item:nth-child(3) {
        margin-left: 0;
      }

      .big-img {
        min-width: 693px;
        width: 693px;
        height: 372px;
        cursor: pointer;
        overflow: hidden;
        .el-image {
          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .right-list {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        width: 489px;
        height: 372px;
        margin-left: 16px;
        cursor: pointer;

        .item {
          display: flex;
          justify-content: space-between;
          height: 116px;
          width: 100%;
          padding: 24px 16px;
          background: #f6f6f6;

          .el-image {
            min-width: 108px;
            width: 108px;
            height: 68px;
          }

          .info {
            width: 331px;
            height: 40px;
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: left;
            padding-left: 16px;

            color: #666666;
            line-height: 20px;
          }
          .title {
            height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .sub {
            font-size: 12px;
            height: 35px;
            line-height: 35px;
          }
        }
      }
    }
  }
}
.join-container {
  @apply w-4/5 m-auto grid grid-cols-3 gap-x-32 gap-y-4;
  .join-box-container {
    position: relative;
    height: 361px;
    width: 323px;
    padding-top: 4px;
    overflow: hidden;
    .float-line {
      height: 4px;
      @apply absolute top-1 left-1/4 w-1/2  z-30;
    }
    .join-box {
      height: 357px;
      width: 319px;
      @apply relative p-4 px-8 cursor-pointer rounded-md overflow-hidden  border-2  hover:text-white;

      .join-content {
        .icon-box {
          @apply relative h-20 block text-center text-7xl font-bold mt-8 transition-all duration-150 ease-out overflow-hidden;
        }
        .badge-title {
          @apply text-xl font-bold;
        }
        .join-main {
          position: relative;
          top: 0;
          left: 0;
          @apply text-center  h-52 mt-6 overflow-hidden transition-all duration-150 ease-out;
        }
      }

      .animation-bg {
        @apply absolute left-0 w-full h-full transition-all duration-300;
        top: -361px;
      }
    }
  }

  .join-box:hover {
    @apply text-white;
    .animation-bg {
      top: 0px;
    }
    .float-line {
      @apply text-white;
      top: 361px;
    }
    .join-content {
      .icon-box {
        @apply text-white h-0;
      }
      .badge-title {
        @apply text-white;
      }
    }
  }
}
</style>
